<template>
    <div class="home">
        <!-- 这是List页面 -->

        <div class="show-list" v-if="list.length">
            <ul>
                <!-- <li v-for="item in list" :key="item.goodsId">
                    <img :src="item.goodsImg" alt="">
                    <p class="name">{{ item.goodsName }}</p>
                    <p class="price">{{ item.goodsPrice }}</p>
                </li>
                    <router-link to="/detail" tag="li"  v-for="item in list" :key="item.goodsId">
                    <img :src="item.goodsImg" alt="">
                    <p class="name">{{ item.goodsName }}</p>
                    <p class="price">{{ item.goodsPrice }}</p>
                </router-link>
                 -->

                <!-- 如何在跳转的同时携带数据?
                    1. 动态路径参数
                    2. query传参
                
                
                 -->

                <!-- 跳转详情页时配置动态路径参数对应的数据 /detail/100 -->
                <!-- 自己手动拼接 -> 麻烦 -->
                <!-- <router-link :to="'/detail/'+item.goodsId+'.html'" tag="li"  v-for="item in list" :key="item.goodsId">
                    <img :src="item.goodsImg" alt="">
                    <p class="name">{{ item.goodsName }}</p>
                    <p class="price">{{ item.goodsPrice }}</p>
                </router-link> -->

                <!-- 
                    可以通过给 to 绑定动态属性 => 传递动态路径参数
                    注意: 
                    1. 此时页面跳转必须通过name属性跳转 => path,params不能同时使用
                    2. params传递数据时 属性名必须和 动态路径的参数名保持一致

                 -->
                <router-link :to="{name:'detail',params:{proid:item.goodsId}}" tag="li"  v-for="item in list" :key="item.goodsId">
                    <img :src="item.goodsImg" alt="">
                    <p class="name">{{ item.goodsName }}</p>
                    <p class="price">{{ item.goodsPrice }}</p>
                </router-link>



                <!-- query传参  => 在url的路由路径之后 拼接数据,用?分隔  
                    to="/detailcopy?a=b&b=2&c=3"
                    
                -->

                <!-- <router-link :to="'/detailcopy?proid='+item.goodsId" tag="li"  v-for="item in list" :key="item.goodsId">
                    <img :src="item.goodsImg" alt="">
                    <p class="name">{{ item.goodsName }}</p>
                    <p class="price">{{ item.goodsPrice }}</p>
                </router-link> -->

                <!-- <router-link :to="{name:'detailcopy',query:{proid:item.goodsId}}" tag="li"  v-for="item in list" :key="item.goodsId">
                    <img :src="item.goodsImg" alt="">
                    <p class="name">{{ item.goodsName }}</p>
                    <p class="price">{{ item.goodsPrice }}</p>
                </router-link> -->
            </ul>
        </div>


    </div>
</template>

<script>
    // 如果不设置name 默认会把index.vue => index作为组件名(常用,可能会重复)  => 需要自定义一个name => 大驼峰

    // 按需引入
    // import axios from "axios";
    // axios.get
    // axios.post

    import {searchAllGoodsAPI} from "@/api/goods"

    export default {
        name:"ListView",    
        data(){
            return {
                list:[],
            }
        },
        methods:{
            async searchAllGoods(){
                // searchAllGoodsAPI().then(res=>{
                //     this.list = res.data;
                // }).catch(err=>{
                //     throw err;
                // })
            
                try{
                    var res = await searchAllGoodsAPI();
                    console.log("请求成功",res);
                    this.list = res.list;
                }catch(err){
                    console.log("请求有误",err);
                }
            }
        },
        mounted(){
            this.searchAllGoods()
           
        }


    }
</script>

<style lang="scss" scoped>
    .show-list{
        padding: 0.1rem;
        ul{
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            li{
                width: 48%;
                margin-bottom: 0.1rem;

                img{
                    width: 80%;
                    display: block;
                    margin: 0 auto;
                }
            }

            .name{
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
                text-overflow: ellipsis;
                line-height: 0.36rem;
            }
        }
    }
</style>